<template>
	<view class="dec-cate" :style="[wrapStyle]">
		<scroll-view scroll-x="true" style="white-space: nowrap;">
			<view class="list-scroll">
				<view class="cate-item" :style="[itemStyle]" v-for="(item, index) in content.tabList" :key="item.nanoid" @click="handleCate(item.categoryId, item.title)">
					<image v-if="item.img" :src="item.img" :style="{height: (item.imgHeight * 2) + 'rpx'}" mode="heightFix" />
					<text v-else>{{ item.title }}</text>
				</view>
			</view>
		</scroll-view>
		<view class="inline-flex fixed-item" :style="[wrapStyle]" v-if="fixedRightItem" @click="handleCate(fixedRightItem.categoryId, fixedRightItem.title)">
			<image v-if="fixedRightItem.img" :src="fixedRightItem.img" :style="{height: (fixedRightItem.imgHeight * 2) + 'rpx'}" mode="heightFix" />
			<text v-else>{{ fixedRightItem.title }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props: {
			content: {
				type: Object,
				default: () => {}
			}
		},
		computed: {
			wrapStyle() {
				let styleObj = {
					paddingTop: `${this.content.marginTop * 2 || 0}rpx`,
					paddingBottom: `${this.content.marginBottom * 2 || 0}rpx`,
					splitSize: `${this.content.splitSize * 2 || 0}rpx`,
					fontSize: `${this.content.fontSize * 2 || 0}rpx`,
					color: this.content.textColor,
				}
				if(this.content.bgImg) {
					styleObj.background = `url(${this.content.bgImg}) no-repeat`;
					styleObj.backgroundSize = '100% auto';
				} else {
					styleObj.backgroundColor = this.content.bgColor;
				}
				return styleObj;
			},
			itemStyle() {
				return {
					fontSize: `${this.content.fontSize * 2 || 0}rpx`,
					color: this.content.textColor,
					marginLeft: `${this.content.splitSize * 2 || 0}rpx`,
				}
			},
			fixedRightItem() {
				let item = null;
				if(this.content.tabList && this.content.tabList.length) {
					item = this.content.tabList[this.content.tabList.length - 1];
				}
				if(item.fixedRight) {
					return item;
				}
				return null;
			}
		},
		methods: {
			handleCate(id, name) {
				if(!id) {
					uni.navigateTo({
						url: `/pagesProduct/searchResult`
					})
				} else {
					uni.navigateTo({
						url: `/pages/classify/classifyGoods/classifyGoods?categoryId=${id}&categoryName=${name}`
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dec-cate {
		display: flex;
		width: 750rpx;
		align-items: center;
		position: relative;
	}

	.fixed-item {
		position: absolute;
		right: 0;
		padding: 0 10rpx;
	}

	.scroll-content {
		width: 100%;
	}

	.list-scroll {
		display: inline-flex;
		flex: 1;
	}

	.cate-item {
		display: inline-flex;
		align-items: center;

		&:last-child {
			padding-right: 20rpx;
		}
	}
</style>